<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>SUI</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link rel="shortcut icon" href="/favicon.ico">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

</head>
<body>
	<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
	<div class="page-group">
		<!-- 单个page ,第一个.page默认被展示-->
		<!-- page 1 -->
		<div class="page page-current" id='router'>
			<header class="bar bar-nav">
				<h1 class='title'>路由</h1>
			</header>
			<div class="content">
				<div class="content-block">
					<ul>
					<li><a href="#router2">ajax加载新页面</a></li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 其他的单个page内联页（如果有） -->
		<!-- page 2 -->
		<div class="page" id='router2'>
			<header class="bar bar-nav">
				<a class="button button-link button-nav pull-left back" href="#router">
					<span class="icon icon-left"></span>
					返回
				</a>
				<h1 class='title'>路由</h1>
			</header>
			<div class="content">
				<div class="content-block">
					这是ajax 加载的新页面，点击左上角的 <a href="#" class='back'>返回</a> 按钮返回上一页。
				</div>
			</div>
		</div>
	</div>

	<!-- popup, panel 等放在这里 -->
	<div class="panel-overlay"></div>
	<!-- Left Panel with Reveal effect -->
	<div class="panel panel-left panel-reveal">
		<div class="content-block">
			<p>这是一个侧栏</p>
			<p></p>
			<!-- Click on link with "close-panel" class will close panel -->
			<p><a href="#" class="close-panel">关闭</a></p>
		</div>
	</div>



	<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

	<!-- 默认必须要执行$.init(),实际业务里一般不会在HTML文档里执行，通常是在业务页面代码的最后执行 -->
	<script>$.init()</script>
</body>
</html>